<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>

      <!--步骤条-->
      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"/>
        <el-step title="提交平台审核"/>
        <el-step title="等待认证结果"/>
      </el-steps>

      <!--步骤1-->
      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age"/>
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'"/>
              <el-option :value="0" :label="'女'"/>
            </el-select>
          </el-form-item>

          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-form-item>

          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                v-for="item in educationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                v-for="item in industryList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                v-for="item in incomeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                v-for="item in returnSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                      v-for="item in contactsRelationList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item class="relese_nameP" label="身份证人像面">
                <el-upload
                        :on-success="onUploadSuccessIdCard1"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload="true"
                        :show-file-list="false"
                        :multiple="false"
                        :action="uploadUrl"
                        accept=".jpg,.jpeg,.png"
                >
                  <el-button size="mini" type="primary">选择图片</el-button>
                </el-upload>
                <div class="logo_img">
                  <img v-if="releseList.logo1 !== ''" class="logo_img_img" :src="releseList.logo1"/>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="relese_nameP" label="身份证国徽面">
                <el-upload
                        :on-success="onUploadSuccessIdCard2"
                        :on-change="beforeAvatarUpload"
                        :auto-upload="true"
                        :show-file-list="false"
                        :multiple="false"
                        :action="uploadUrl"
                        accept=".jpg,.jpeg,.png"
                >
                  <el-button size="mini" type="primary">选择图片</el-button>
                </el-upload>
                <div class="logo_img">
                  <img v-if="releseList.logo2 !== ''" class="logo_img_img" :src="releseList.logo2"/>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item class="relese_nameP" label="房产信息">
                <el-upload
                        :on-success="onUploadSuccessHouse"
                        :on-change="beforeAvatarUpload"
                        :auto-upload="true"
                        :show-file-list="false"
                        :multiple="false"
                        :action="uploadUrl"
                        accept=".jpg,.jpeg,.png"
                >
                  <el-button size="mini" type="primary">选择图片</el-button>
                </el-upload>
                <div class="logo_img">
                  <img v-if="releseList.logo3 !== ''" class="logo_img_img" :src="releseList.logo3"/>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="relese_nameP" label="车辆信息">
                <el-upload
                        :on-success="onUploadSuccessCar"
                        :on-change="beforeAvatarUpload"
                        :auto-upload="true"
                        :show-file-list="false"
                        :multiple="false"
                        :action="uploadUrl"
                        accept=".jpg,.jpeg,.png"
                >
                  <el-button size="mini" type="primary">选择图片</el-button>
                </el-upload>
                <div class="logo_img">
                  <img v-if="releseList.logo4 !== ''" class="logo_img_img" :src="releseList.logo4"/>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button
              type="primary"
              :disabled="submitBtnDisabled"
              @click="save"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="active === 1">
        <div style="margin-top: 40px;">
          <el-alert
            title="您的认证申请已成功提交，请耐心等待"
            type="warning"
            show-icon
            :closable="false"
          >
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>

      <!--步骤2-->
      <div v-if="active === 2">
        <div style="margin-top: 40px;">
          <el-alert
            v-if="borrowerStatus === 2"
            title="您的认证审批已通过"
            type="success"
            show-icon
            :closable="false"
          >
          </el-alert>
          <el-alert
            v-if="borrowerStatus === -1"
            title="您的认证审批未通过"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
          <el-button style="margin-top: 20px" type="success">
            我要借款
          </el-button>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let BASE_API = process.env.BASE_API

    return {
      active: null, // 步骤
      borrowerStatus: null, // 审批是否通过
      submitBtnDisabled: false, // 提交按钮
      borrower: { // 借款人信息
        borrowerAttachList: [],
      },
      educationList: [], // 学历列表
      industryList: [], // 行业列表
      incomeList: [], // 月收入列表
      returnSourceList: [], // 还款来源列表
      contactsRelationList: [], // 联系人关系
      uploadUrl: BASE_API + '/api/go-fast/uploadFile', // 文件上传地址
      releseList:{ // 预览图片用
        logo1:'',
        logo2: '',
        logo3: '',
        logo4: '',
      }
    }
  },

  created() {
    this.getUserInfo()
    this.initSelected()
  },

  methods: {
    // 提交表单
    save() {
      this.submitBtnDisabled = true
      this.$axios
        .$post('/api/core/borrower/auth/save', this.borrower)
        .then((response) => {
          this.active = 1
        })
    },

    // 初始化用户当前借款状态
    getUserInfo() {
      this.$axios
        .$get('/api/core/borrower/auth/getBorrowerStatus')
        .then((response) => {
          this.borrowerStatus = response.data.borrowerStatus
          switch (this.borrowerStatus) {
            case 0:
              this.active = 0
                  break
            case 1:
              this.active = 1
                  break
            case 2:
              this.active = 2
                  break
            case -1:
              this.active = 2
                  break
          }
        })
    },

    // 初始化选择列表
    initSelected() {
      // 学历列表
      this.$axios
        .$get('/admin/core/dict/findByDictCode/education')
        .then((response) => {
          this.educationList = response.data.dictList
        })

      //行业列表
      this.$axios
        .$get('/admin/core/dict/findByDictCode/industry')
        .then((response) => {
          this.industryList = response.data.dictList
        })

      //收入列表
      this.$axios
        .$get('/admin/core/dict/findByDictCode/income')
        .then((response) => {
          this.incomeList = response.data.dictList
        })

      //还款来源列表
      this.$axios
        .$get('/admin/core/dict/findByDictCode/returnSource')
        .then((response) => {
          this.returnSourceList = response.data.dictList
        })

      //联系人关系列表
      this.$axios
        .$get('/admin/core/dict/findByDictCode/relation')
        .then((response) => {
          this.contactsRelationList = response.data.dictList
        })

    },

    // 上传前函数
    beforeAvatarUpload(file) {
      if (file.status !== 'ready') return
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isJPG =
              fileType === "jpg" ||
              fileType === "jpeg" ||
              fileType === "png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("仅支持jpg，png格式的图片！");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      // 通过校验，进行后续操作
      return isJPG && isLt2M
    },

    // //手动上传函数
    // uploadFile(item) {
    //   debugger
    //   let fileObj = item.file
    //   const form = new FormData
    //   form.append("file", fileObj)
    //   this.$axios.$post(this.uploadUrl, form).then((response) => {
    //     if (response.data.code === 0) {
    //       this.$message.success("上传成功")
    //     }
    //   })
    // },

    // 预览图片
    getLocalImg(event, type){
      // 获取上传图片的本地url，用于上传前的本地预览
      let url = '';
      if (window.createObjectURL !== undefined) {
        url = window.createObjectURL(event.raw);
      } else if (window.URL !== undefined) {
        url = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL !== undefined) {
        url = window.webkitURL.createObjectURL(event.raw);
      }

      // 根据不同种类，预览到不同位置
      switch (type) {
        case 'idCard1':
          this.releseList.logo1 = url
          break;
        case 'idCard2':
          this.releseList.logo2 = url
          break;
        case 'house':
          this.releseList.logo3 = url
          break;
        case 'car':
          this.releseList.logo4 = url
          break;
      }
    },

    // 上传后函数
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, 'idCard1')
    },

    onUploadSuccessIdCard2(response, file) {
      this.onUploadSuccess(response, file, 'idCard2')
    },

    onUploadSuccessHouse(response, file) {
      this.onUploadSuccess(response, file, 'house')
    },

    onUploadSuccessCar(response, file) {
      this.onUploadSuccess(response, file, 'car')
    },

  // 统计填充上传的文件列表
    onUploadSuccess(response, file, type) {
      // 如果上传失败
      if (response.code !== 0) {
        this.$message.error(response.message)
        return
      }

      // 预览图片
      this.getLocalImg(file, type)

      // 填充列表
      // 首先过滤掉数组中因用户重复提交而出现的重复类型的图片
      this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.filter((item) => {
        return item.imageType !== type
      })

      // 将图片添加至列表中
      this.borrower.borrowerAttachList.push({
        imageName: file.name,
        imageUrl: response.data.data.url,
        imageType: type
      })

      console.log('list1', this.releseList)
      console.log('list2', this.borrower.borrowerAttachList)

    },
  }
}
</script>
<style scoped>
  .logo_img{
    width:250px;
    height:250px;
    border:4px dashed #DCDFE6;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .logo_img_img{
    width:250px;
    height:250px;
    display:block;

  }
  /*.relese_nameP{*/
  /*  display: inline-block !important;*/
  /*}*/
</style>
